<template>
	<view class="page">
		<u-gap height="30"></u-gap>
		<view class="bannerVue relative margin0">
			<image class="absolute-auto" src="https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/wechat_banner.jpeg" style="width: 100%; height: 400rpx; border-radius: 12rpx;"></image>
			<text class="absolute" style="left: 30rpx; bottom: 70rpx; color: #fff; font-weight: 600; font-size: 32rpx;">AI微信助手</text>
			<text class="absolute" style="left: 30rpx; bottom: 30rpx; color: #fff;font-size: 26rpx;">智能助手</text>
		</view>
		
		<!-- 一键体验按钮 -->
		<view class="btnVue margin30 flex-between">
			<view class="btn" @click="$u.toast('暂未开放')">一键体验</view>
			<view class="btn coopration" @click="$u.toast('暂未开放')">合作联系</view>
		</view>
		
		<!-- 了解我们 -->
		<view class="title">了解我们</view>
		<view class="box flex-between flex-wrap margin0">
			<view class="li">
				<image src="https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/1.jpg"></image>
				<view class="bot">
					<view class="name">智能对话</view>
					<view class="descri">基于先进AI技术，提供智能、自然的对话体验。</view>
				</view>
			</view>
			<view class="li">
				<image src="https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/2.jpg"></image>
				<view class="bot">
					<view class="name">多场景应用</view>
					<view class="descri">使用于客服、教育、销售等多个领域。</view>
				</view>
			</view>
			<view class="li">
				<image src="https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/3.jpg"></image>
				<view class="bot">
					<view class="name">定制化服务</view>
					<view class="descri">根据企业需求，提供个性化AI助手解决方案。</view>
				</view>
			</view>
			<view class="li">
				<image src="https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/4.jpg"></image>
				<view class="bot">
					<view class="name">持续学习进化</view>
					<view class="descri">不断提升算法，提升AI助手的智能水平。</view>
				</view>
			</view>
		</view>
		
		<!-- 案例查看 -->
		<view class="title" style="padding-bottom: 0;">案例查看</view>
		<view class="item margin20" v-for="(item, index) in 1" :key="index">
			<view class="top">新美业-若水精华液</view>
			<view class="bot flex">
				<view class="flex-1">
					<view class="descri">该AI解决微信实时客服，效果图发送，产品答疑和思域群发</view>
					<view class="lignt">亮点：多图多效果图发送</view>
					<view class="flex margin20">
						<view class="tag">AI语音对话</view>
						<view class="tag">多效果图</view>
					</view>
				</view>
				<image src="https://ant-aiet.oss-cn-hangzhou.aliyuncs.com/assets/5.jpg"></image>
			</view>
		</view>
		<u-gap height="30"></u-gap>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
	.bannerVue {
		width: 690rpx;
		height: 400rpx;
	}
	.btnVue {
		width: 690rpx;
		height: 80rpx;
		.btn {
			width: 330rpx;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;
			color: #fff;
			border-radius: 10rpx;
			background: #18AB4E;
		}
		.coopration {
			background: #18AB4E;
		}
	}
	
	.title {
		font-weight: 700 ;
		font-size: 30rpx;
		color: #000;
		padding: 30rpx 0 15rpx 30rpx;
	}
	.box {
		width: 690rpx;
		.li {
			width: 330rpx;
			height: 480rpx;
			background: #fff;
			border-radius: 12rpx;
			margin-bottom: 30rpx;
			image {
				width: 330rpx;
				height: 260rpx;
				border-radius: 12rpx 12rpx 0 0;
			}
			.bot {
				width: 330rpx;
				height: 220rpx;
				padding: 30rpx;
				.name {
					font-weight: 600;
					color: #000;
				}
				.descri {
					color: #6B97C5;
					padding-top: 10rpx;
				}
			}
		}
		.li:nth-child(3),.li:nth-child(4) {
			margin-bottom: 0;
		}
	}
	.item {
		width: 690rpx;
		height: 420rpx;
		background: #fff;
		border-radius: 12rpx;
		.top {
			width: 100%;
			height: 100rpx;
			border-radius: 12rpx 12rpx 0 0;
			line-height: 100rpx;
			padding-left: 20rpx;
			color: #fff;
			font-weight: 600;
			font-size: 30rpx;
			background: rgba(24, 171, 78, 0.8);
		}
		.bot {
			width: 100%;
			height: 320rpx;
			padding: 30rpx;
			.descri {
				color: #968082;
			}
			.lignt {
				color: #968082;
				padding-top: 15rpx;
			}
			.tag {
				width: 150rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				background: #FCE7F3;
				color: #A6326E;
				margin-right: 15rpx;
				border-radius: 12rpx;
				font-size: 24rpx;
			}
			image {
				width: 220rpx;
				height: 100%;
				border-radius: 12rpx;
				margin-left: 30rpx;
			}
		}
	}
</style>
